<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>iOS风格计算器</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/calculator.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
</head>
<body>
    <div class="ios-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-time">14:30</div>
            <div class="status-bar-icons">
                <i class="fas fa-wifi"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>
        
        <!-- 应用标题 -->
        <div class="app-header">
            <h1><i class="fas fa-calculator"></i> 计算器</h1>
            <p class="subtitle">iOS风格科学计算器</p>
        </div>

        <!-- 计算器主体 -->
        <div class="calculator-container">
            <!-- 显示屏 -->
            <div class="display-container">
                <div class="expression-display" id="expression">0</div>
                <div class="result-display" id="result"></div>
            </div>
            
            <!-- 按钮区域 -->
            <div class="buttons-container">
                <!-- 第一行：清除、删除、特殊功能 -->
                <div class="button-row">
                    <button class="btn btn-function" onclick="clearAll()">AC</button>
                    <button class="btn btn-function" onclick="clearEntry()">C</button>
                    <button class="btn btn-function" onclick="deleteLast()">⌫</button>
                    <button class="btn btn-operator" onclick="appendToExpression('/')">÷</button>
                </div>
                
                <!-- 第二行：数字7-9，乘法 -->
                <div class="button-row">
                    <button class="btn btn-number" onclick="appendToExpression('7')">7</button>
                    <button class="btn btn-number" onclick="appendToExpression('8')">8</button>
                    <button class="btn btn-number" onclick="appendToExpression('9')">9</button>
                    <button class="btn btn-operator" onclick="appendToExpression('*')">×</button>
                </div>
                
                <!-- 第三行：数字4-6，减法 -->
                <div class="button-row">
                    <button class="btn btn-number" onclick="appendToExpression('4')">4</button>
                    <button class="btn btn-number" onclick="appendToExpression('5')">5</button>
                    <button class="btn btn-number" onclick="appendToExpression('6')">6</button>
                    <button class="btn btn-operator" onclick="appendToExpression('-')">−</button>
                </div>
                
                <!-- 第四行：数字1-3，加法 -->
                <div class="button-row">
                    <button class="btn btn-number" onclick="appendToExpression('1')">1</button>
                    <button class="btn btn-number" onclick="appendToExpression('2')">2</button>
                    <button class="btn btn-number" onclick="appendToExpression('3')">3</button>
                    <button class="btn btn-operator" onclick="appendToExpression('+')">+</button>
                </div>
                
                <!-- 第五行：0、小数点、等号 -->
                <div class="button-row">
                    <button class="btn btn-number btn-zero" onclick="appendToExpression('0')">0</button>
                    <button class="btn btn-number" onclick="appendToExpression('.')">.</button>
                    <button class="btn btn-equals" onclick="calculate()">=</button>
                </div>
                
                <!-- 科学计算功能行 -->
                <div class="button-row scientific">
                    <button class="btn btn-function" onclick="appendToExpression('(')">(</button>
                    <button class="btn btn-function" onclick="appendToExpression(')')">)</button>
                    <button class="btn btn-function" onclick="appendToExpression('√(')">√</button>
                    <button class="btn btn-function" onclick="appendToExpression('π')">π</button>
                </div>
                
                <div class="button-row scientific">
                    <button class="btn btn-function" onclick="appendToExpression('math.sin(')">sin</button>
                    <button class="btn btn-function" onclick="appendToExpression('math.cos(')">cos</button>
                    <button class="btn btn-function" onclick="appendToExpression('math.tan(')">tan</button>
                    <button class="btn btn-function" onclick="appendToExpression('e')">e</button>
                </div>
            </div>
        </div>
        
        <!-- 错误提示 -->
        <div class="error-toast hidden" id="error-toast">
            <i class="fas fa-exclamation-triangle"></i>
            <span id="error-message">计算错误</span>
        </div>
        
        <!-- 页脚 -->
        <footer class="app-footer">
            <p>© 2023 iOS风格计算器 | 支持基础与科学计算</p>
        </footer>
    </div>
    
    <script src="{{ url_for('static', filename='js/calculator.js') }}"></script>
</body>
</html> 